{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}
<script src="/plugin/admin/app/view/demos/enrollee/message/table.js?a={php}echo rand(0,1000000);{/php}"></script>
{/block}
{block name="appDiv"}
<lay-tab type="brief" style="
      background: #fff;
      padding: 20px 0;
      border: 1px solid #eee;
      border-radius: 2px;
      height: 70%;
      margin: 10px;
    " v-model="currentTab" tab-position="left">
    <lay-tab-item id="system">
        <template #title>
            系统通知
            <div style="width: 40px; margin-left: 20px; display: inline-block">
                <div v-if="messageInfo.system > 0" class="corner-mark">
                    {{ messageInfo.system }}
                </div>
            </div>
        </template>
        <table-content key="system" v-model="messageInfo.system"></table-content>
    </lay-tab-item>
    <lay-tab-item id="user">
        <template #title>
            用户私信
            <div style="width: 40px; margin-left: 20px; display: inline-block">
                <div v-if="messageInfo.user > 0" class="corner-mark">
                    {{ messageInfo.user }}
                </div>
            </div>
        </template>
        <table-content key="user" v-model="messageInfo.user" ></table-content>
    </lay-tab-item>
    <lay-tab-item id="todo">
        <template #title>
            待办事项
            <div style="width: 40px; margin-left: 20px; display: inline-block">
                <div v-if="messageInfo.todo > 0" class="corner-mark">
                    {{ messageInfo.todo }}
                </div>
            </div>
        </template>
        <table-content key="todo" v-model="messageInfo.todo" > </table-content>
    </lay-tab-item>
</lay-tab>
{/block}
{block name="afterDiv"}
<script>
  vue_data={
      currentTab : ref('system'),
       messageInfo : ref({
          system: 3,
          user: 1,
          todo: 11
      })
  };
  vue_setup={};
  methods={
    onLoad(){
      console.log('页面初始化请求数据并加载')
    },
  };
  watch={};
  computed={};
  mounted = function () {
    this.onLoad();
  };
  updated = function () {
  };
</script>

<style scoped>
    .corner-mark {
        height: 16px;
        display: inline-block;
        padding: 0 5px;
        color: #fff;
        line-height: 16px;
        background-color: #f5222d;
        border-radius: 14px;
    }
</style>
{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}
<script>
    app.component('table-content', tableContent);
</script>
{__block__}
{/block}